<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <div class="_box">
      <div
        ref="balls"
        class="ball"
        v-for="(item ,index) in menuList"
        :key="index"
        @mouseenter="eleStop(index)"
        @mouseleave="AminationLear(index)"
        @click="ChangeItem(index)"
      >
        <img :src="item.img2" alt="" />
        <p>{{ item.title }}</p>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
let menuList = reactive([
  {
    url: '../../../img/icon/停车卡口接入系统_nor.png',
    img: '../../../img/icon/停车卡口接入系统_hov.png',
    img2: '../../../img/icon/停车卡口接入系统_nor.png',
    title: '停车卡口接入系统'
  },
  {
    url: '../../../img/icon/交通安全画像系统_nor.png',
    img: '../../../img/icon/交通安全画像系统_hov.png',
    img2: '../../../img/icon/交通安全画像系统_nor.png',
    title: '交通安全画像系统'
  },
  {
    url: '../../../img/icon/可视化作战平台_nor.png',
    img: '../../../img/icon/可视化作战平台_hov.png',
    img2: '../../../img/icon/可视化作战平台_nor.png',
    title: '可视化作战平台'
  },
  {
    url: '../../../img/icon/重点车辆监管系统_nor.png',
    img: '../../../img/icon/重点车辆监管系统_hov.png',
    img2: '../../../img/icon/重点车辆监管系统_nor.png',
    title: '重点车辆监管系统'
  },
  {
    url: '../../../img/icon/交通事故智能定位分析系统_nor.png',
    img: '../../../img/icon/交通事故智能定位分析系统_hov.png',
    img2: '../../../img/icon/交通事故智能定位分析系统_nor.png',
    title: '交通事故智能定位分析系统'
  },
  {
    url: '../../../img/icon/停车卡口接入系统_nor.png',
    img: '../../../img/icon/停车卡口接入系统_hov.png',
    img2: '../../../img/icon/停车卡口接入系统_nor.png',
    title: '停车卡口接入系统'
  }
])
// 鼠标移入事件

let balls:any = ref(null)
const eleStop = (index:number)=>{
    console.log(index);
    // 替换为静态时的图片
    menuList[index].img2 = menuList[index].img;
    // 暂停动画
    balls.value.forEach((item:any)=>item.style.animationPlayState = 'paused')
}

const AminationLear =(index:number)=>{
  // 替换为动态时的图片
  menuList[index].img2=menuList[index].url;
  // 启动动画
  balls.value.forEach((item:any)=>item.style.animationPlayState='running')
}

const ChangeItem=(index:number)=>{
  alert('点击了'+menuList[index].title)
}

onMounted(() => {
  let items:any = balls.value
  for (let i = 0; i < items.length; i++) {
    // 定义每一项的定义动画何时开始
    items[i].style['animation-delay'] =
      -7.5 - 5 * i + `s,` + -5 * i + `s,` + -5 * i + `s`
  }
})
</script>
<style scoped>
@keyframes animX {
  0% {
    left: 0px;
  }

  100% {
    left: 1000px;
  }
}

@keyframes animY {
  0% {
    top: 0px;
  }

  100% {
    top: 1000px;
  }
}

._box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* margin-top: 100px; */
  width: 1000px;
  height: 1000px;
  margin: 0 auto;
  top: 700px;
  left:-200px;
}

.ball {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 动画执行一次所需要的时间 */
  animation-duration: 15s, 15s, 30s;
  /* 动画以何种运行轨迹完成一个周期 椭圆运动轨迹 */
  animation-timing-function: cubic-bezier(0.36, 0, 0.64, 1);
  /* 动画播放次数，无限循环播放 */
  animation-iteration-count: infinite;
  /* 是否轮流反向比方动画 */
  animation-direction: alternate;
  animation-name: animX, animY, scale;
  cursor: pointer;
}

img {
  width: 400px;
}

p {
  font-size: 40px;
}
</style>